<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Documento sin t&iacute;tulo</title>
		<link rel="stylesheet" type="text/css" href="../css/estilo.css" />
		<script language="javascript" src="../ajax/ajax.js">
		</script>
		<script language="javascript">

			function mostrarResultado( value ) {
				var puntero = document.getElementById("divresultado");
				if( value == true ) {
					puntero.style.display = "block";
				}else{
					puntero.style.display = "none";
				}
			}

			function mostrarMensaje( value ) {
				var puntero = document.getElementById("divmensaje");
				if( value == true ) {
					puntero.style.display = "block";
				}else{
					puntero.style.display = "none";
				}
			}

			function mostrarError( mensaje ){
				var puntero = document.getElementById("diverror");
				if( mensaje.length > 0 ) {
					puntero.innerHTML = "<p>" + mensaje + "</p>";
					puntero.style.display = "block";
				}else{
					puntero.style.display = "none";
				}
			}

			function init(){
				mostrarMensaje( false );
				mostrarError( "" )
				mostrarResultado( false );
			}

			function limpiarFormulario(){
				mostrarResultado( false );
				document.getElementById("n1").value = "";
				document.getElementById("n2").value = "";
				document.getElementById("suma").value = "";
			}

			function procesar(){
				mostrarMensaje( true );
				mostrarError( "" );
				var divresultado = document.getElementById("divresultado");
				var n1 = document.getElementById("n1").value;
				var n2 = document.getElementById("n2").value;
				var url = "procesar.jsp";
				var http = getXMLHTTPRequest();
				http.open("POST", url, true);
				http.onreadystatechange = function(){
					if (http.readyState == 4) {
						mostrarMensaje( false );
						if(http.status == 200) {
							divresultado.innerHTML = http.responseText;
							mostrarResultado( true );
						} else {
							mostrarError( "Error: " +  http.status );
							mostrarResultado( false );
						}
					}
				}
				http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				http.send("n1=" + n1 + "&n2=" + n2);
			}

		</script>
	</head>
	<body onload="init()">
		<h1>Suma de Dos N&uacute;meros</h1>

		<div class="error" id="diverror"></div>

		<div id="divmensaje">
			<table width="146" class="mensaje">
				<tr>
					<td width="91">Procesando</td>
					<td width="43">
						<img src="../img/anim.gif" width="32" height="32" />
					</td>
				</tr>
			</table>

		</div>
		<form name="form1">
			<table width="500">
				<tr>
					<td width="96">N&uacute;mero 1</td>
					<td width="392">
						<input name="n1" type="text" id="n1" size="5" maxlength="5" />
					</td>
				</tr>
				<tr>
					<td>N&uacute;mero 2</td>
					<td>
						<input name="n2" type="text" id="n2" size="5" maxlength="5" />
					</td>
				</tr>

				<tr>
					<td colspan="2">
						<input type="button" name="calcular" id="calcular" onclick="procesar()" value="Calcular" />
						<input type="button" name="limpiar" id="limpiar" value="Limpiar" onclick="limpiarFormulario()" />
					</td>
				</tr>
			</table>
		</form>

		<div class="resultado" id="divresultado"></div>
		<div class="pie" id="divpie">
			<p>www.perudev.net</p>
		</div>
	</body>
</html>
